<template>
  <el-scrollbar wrap-class="scrollbar-wrapper">
    <div class="wrapper">
      <el-table
        v-loading="listLoading"
        v-if="data.length > 0"
        :show-header="false"
        :data="data"
        highlight-current-row
        @row-click="handleRowClick">
        <el-table-column v-if="showIcon" width="35px">
          <template slot-scope="scope">
            <svg-icon :icon-class="scope.row.isRead ? 'readed' : 'unreaded'" :class="scope.row.isRead ? 'readed' : 'unreaded'" class="icon-column"/>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <div class="content">
              {{ handleContent(scope.row) }}
              <div style="font-size: small;color: #C0C4CC">{{ scope.row.createdTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</div>
            </div>
            <el-badge v-if="isDot" :is-dot="!scope.row.isRead" class="dot"/>
            <el-button v-if="!isDot && !scope.row.isRead" type="text" class="btn" @click="handleReaded(scope.row)"><i class="el-icon-check"/>标为已读</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-else class="note">{{ emptyMsg }}</div>
    </div>
  </el-scrollbar>
</template>
<script>
export default {
  name: 'MessageList',
  props: {
    data: {
      type: Array,
      default: function() {
        return []
      }
    },
    emptyMsg: {
      type: String,
      default: '没有新消息'
    },
    listLoading: {
      type: Boolean,
      default: false
    },
    isDot: {
      type: Boolean,
      default: true
    },
    showIcon: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleContent(row) {
      const announceMap = {
        1: '系统消息',
        2: '维护公告'
      }
      if (row.notiType === 1) { // 公告
        return '【' + announceMap[row.category] + '】 ' + row.content
      } else if (row.notiType === 2) { // 通知
        return '【' + row.target + '】 ' + row.content
      } else { // 私信
        return '【' + row.sender + '】 ' + row.content
      }
    },
    handleRowClick(row) {
      // 显示原点时点击消息行标记为已读
      if (this.isDot && row.isRead === 0) {
        this.$emit('read-message', row)
      }
    },
    handleReaded(row) {
      // 显示标为已读按钮时点击按钮标记为已读
      if (!this.isDot && row.isRead === 0) {
        this.$emit('read-message', row)
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .wrapper {
    .note {
      text-align: center;
      padding: 30px;
      font-size: small;
      color: #909399;
    }
    .content {
      display: inline-block;
      width: 95%;
    }
    .dot {
      position: absolute;
      top: 30%;
      font-size: 16px;
    }
    .icon-column {
      font-size: 20px;
    }
    .unreaded {
      color: #909399;
    }
    .readed {
      color: #67C23A;
    }
    .btn {
      position: absolute;
      right: 10px;
      color: #409EFF;
      display: none;
      i {
        color: inherit;
        margin: 0 5px;
      }
    }
    .el-table__body tr:hover{
      .btn{
        display: inline;
      }
    }
  }
</style>
